<template>
  <a-form
    style="max-width: 480px; margin: 0 auto"
    label-align="left"
    auto-label-width
    :model="form"
    @submit="register"
    size="large"
  >
    <a-form-item field="userAccount" label="账号" tooltip="账户不少于 4 位" :validate-status="usernameStatus" feedback>
      <a-input v-model="form.userAccount" placeholder="请输入账号" />
    </a-form-item>
    <a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码" :validate-status="passwordStatus" feedback>
      <a-input-password
        v-model="form.userPassword"
        placeholder="请输入密码"
      />
    </a-form-item>
    <a-form-item field="checkPassword" tooltip="两次密码不一致" label="重复密码" :validate-status="passwordStatus" feedback>
      <a-input-password
        v-model="form.checkPassword"
        placeholder="请再次输入密码"
      />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" style="width: 100%"
      >注册</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import store from "@/store";
import { computed, ref } from "vue";

const usernameStatus = ref();
const passwordStatus = ref();
const form = ref({
  userAccount:'',
  userPassword:'',
  checkPassword: '',
});
const getUsernameStatus = () => {
  let userAccount = form.value?.userAccount;
  if (!userAccount) {
    usernameStatus.value = 'error';
    return 0;
  }else if (userAccount.length < 4) {
    usernameStatus.value = 'warning';
    return 0;
  }else if (!store.state.curUser) {
    usernameStatus.value = 'validating';
  }else usernameStatus.value = 'success';
  return 1;
};
const getPasswordStatus = () => {
  let userPassword = form.value?.userPassword;
  if (!userPassword) {
    passwordStatus.value = 'error';
    return 0;
  }else if (userPassword.length < 8) {
    passwordStatus.value = 'warning';
    return 0;
  }else if (!store.state.curUser) {
    passwordStatus.value = 'validating';
  }else passwordStatus.value = 'success';
  return 1;
};

const register = () => {
  let flag = false;
   if (!getPasswordStatus()) flag = true;
   if (!getUsernameStatus()) flag = true;
   if (flag) return;
  store.dispatch('user/register', form.value);
}
</script>

<style scoped>

</style>